<!DOCTYPE html>
<html>
  <head>
    <title>Capture Photo</title>

	<meta name="viewport" content="width=device-width; initial-scale=1.0" />
	<link rel="stylesheet" href="css/jquery.mobile-1.3.2.css" />
	<script type="text/javascript" charset="utf-8" src="js/cordova-2.9.0.js"></script>
	<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.mobile-1.3.1.min.js"></script>
	<script type="text/javascript" charset="utf-8" src="js/library.js"></script>
    <script type="text/javascript" charset="utf-8">

	var onSuccess = function(position) {
   		var position = 'Latitude: '          + position.coords.latitude          + '<br>' +
	          'Longitude: '         + position.coords.longitude         + '<br>' +
	          'Altitude: '          + position.coords.altitude          + '<br>' +
	          'Accuracy: '          + position.coords.accuracy          + '<br>' +
	          'Altitude Accuracy: ' + position.coords.altitudeAccuracy  + '<br>' +
	          'Heading: '           + position.coords.heading           + '<br>' +
	          'Speed: '             + position.coords.speed             + '<br>' +
	          'Timestamp: '         + position.timestamp                + '<br>';
	          
       	$("#position").html(position); 
	};
	
	// onError Callback receives a PositionError object
	//
	function onError(error) {
	    alert('code: '    + error.code    + '\n' +
	          'message: ' + error.message + '\n');
	}
	
	$(document).on("pagebeforeshow", "#gps",function(event){
		navigator.geolocation.getCurrentPosition(onSuccess, onError);
	});
	

    </script>
  </head>
  <body>
  	<div  data-role="page" id="gps">
   		<div id="position">
	</div>
  </body>
</html>